<template>

	<div v-loading="loading">
		<!--form表单-->
		<el-form size="small" ref="form" :model="form" label-width="200px">
			<el-tabs v-model="activeName" type="card">
				<el-tab-pane label="基本信息" name="1"></el-tab-pane>
				<el-tab-pane label="适用商品" name="2"></el-tab-pane>
			</el-tabs>
			<template v-if="activeName=='1'">
				<!--修改优惠券-->
				<div class="common-form">修改优惠券</div>

				<el-form-item label="优惠券名称" prop="name" :rules="[{ required: true, message: ' ' }]">
					<el-input v-model="form.name" placeholder="请输入优惠券名称"></el-input>
					<div class="tips">例如：满100减10</div>
				</el-form-item>
				<el-form-item label="优惠券颜色">
					<el-radio-group v-model="form.color">
						<el-radio :label="10">蓝色</el-radio>
						<el-radio :label="20">红色</el-radio>
						<el-radio :label="30">紫色</el-radio>
						<el-radio :label="40">黄色</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="优惠券类型">
					<el-radio-group v-model="form.coupon_type">
						<el-radio :label="10">满减券</el-radio>
						<el-radio :label="20">折扣券</el-radio>
					</el-radio-group>
				</el-form-item>
				<div v-if="form.coupon_type == 10">
					<el-form-item label="减免金额" prop="reduce_price" :rules="[{ required: true, message: ' ' }]">
						<el-input v-model="form.reduce_price" placeholder="请输入减免金额" type="number"></el-input>
					</el-form-item>
				</div>
				<div v-else>
					<el-form-item label="折扣率 " prop="discount" :rules="[{ required: true, message: ' ' }]">
						<el-input v-model="form.discount" placeholder="请输入折扣率" type="number"></el-input>
						<div class="tips">折扣率范围0-10，9.5代表9.5折，0代表不折扣</div>
					</el-form-item>
					<el-form-item label="最多优惠金额" prop="max_price" :rules="[{ required: true, message: ' ' }]">
						<el-input v-model="form.max_price" placeholder="请输入最多优惠金额" type="number"></el-input>
						<div class="tips">最大抵扣金额不能超出此金额，0代表不限制</div>
					</el-form-item>
				</div>

				<el-form-item label="最低消费金额" prop="min_price" :rules="[{ required: true, message: ' ' }]">
					<el-input v-model="form.min_price" placeholder="请输入最低消费金额" type="number"></el-input>
				</el-form-item>

				<el-form-item label="到期类型">
					<el-radio-group v-model="form.expire_type">
						<el-radio :label="10">领取后生效</el-radio>
						<el-radio :label="20">固定时间</el-radio>
					</el-radio-group>
				</el-form-item>
				<div v-if="form.expire_type == 10">
					<el-form-item label="有效天数">
						<el-input v-model="form.expire_day" placeholder="请输入有效天数" type="number"></el-input>
					</el-form-item>
				</div>
				<div v-else>
					<el-form-item label="有效时间">
						<el-date-picker v-model="form.active_time" type="daterange" align="right" unlink-panels
							value-format="YYYY-MM-DD" range-separator="至" start-placeholder="开始日期"
							end-placeholder="结束日期" :picker-options="pickerOptions0"></el-date-picker>
					</el-form-item>
				</div>

				<el-form-item label="发放总数量 " prop="total_num" :rules="[{ required: true, message: ' ' }]">
					<el-input v-model="form.total_num" placeholder="请输入发放总数量" type="number"></el-input>
					<div class="tips">限制领取的优惠券数量，-1为不限制</div>
				</el-form-item>
				<el-form-item label="是否显示在领券中心">
					<el-radio-group v-model="form.show_center">
						<el-radio :label="1">显示</el-radio>
						<el-radio :label="0">不显示</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="使用条件">
					<el-radio-group v-model="form.free_limit">
						<el-radio :label="0">不限制</el-radio>
						<el-radio :label="1">不可与促销同时使用</el-radio>
						<el-radio :label="2">不可与等级优惠同时使用</el-radio>
						<el-radio :label="3">不可于促销和等级优惠同时使用</el-radio>
					</el-radio-group>
					<div class="tips">促销是指满减，等级优惠券值商品的会员等级折扣</div>
				</el-form-item>
				<el-form-item label="排序">
					<el-input type="number" v-model="form.sort" placeholder="请输入排序"></el-input>
				</el-form-item>
			</template>
			<template v-if="activeName=='2'">
				<div class="common-form">适用商品</div>
				<el-form-item label="选择">
					<el-radio-group v-model="form.apply_range">
						<el-radio :label="10">全部商品</el-radio>
						<el-radio :label="20">
							<span>指定商品</span>
						</el-radio>
						<el-radio :label="30">
							<span>指定分类</span>
						</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item v-if="form.apply_range==20">
					<el-button class="mb10" @click="is_product=true" type="primary" plain>添加商品
					</el-button>
					<el-table v-if="product_list.length>0" :data="product_list" max-height="400" border
						style="width: 100%">
						<el-table-column prop="product_id" label="ID" width="180">
						</el-table-column>
						<el-table-column prop="product_name" label="商品名称" width="180">
						</el-table-column>
						<el-table-column prop="image" label="图片">
							<template #default="scope">
								<img v-img-url="hasImages(scope.row.product_image)" alt="" :width="50" />
							</template>
						</el-table-column>
						<el-table-column label="操作">
							<template #default="scope">
								<el-button @click="deleteClick(scope.$index)" type="text" size="small">删除</el-button>
							</template>
						</el-table-column>
					</el-table>
				</el-form-item>
				<el-form-item label="" v-if="form.apply_range==30">
					<el-button class="mb10" @click="is_category=true" type="primary" plain>添加分类
					</el-button>
					<div>
						<template v-if="category_list.first.length>0">
							<div v-for="(item,index) in category_list.first" :key="item.category_id" class="mr10 mb10"
								style="display:inline-block;">
								<el-tag size="large" type="info">
									{{item.parent?item.parent+'→'+item.name:item.name}}
								</el-tag>
							</div>
						</template>
						<template v-if="category_list.second.length>0">
							<div v-for="(item,index) in category_list.second" :key="item.category_id" class=" mr10 mb10"
								style="display:inline-block;">
								<el-tag size="large" class=" mr10 mb10" type="info">
									{{item.parent?item.parent+'→'+item.name:item.name}}
								</el-tag>
							</div>
						</template>
					</div>
				</el-form-item>
			</template>
			<!--提交-->
			<div class="common-button-wrapper">
				<el-button type="info" size="small" @click="cancelFunc" :loading="loading">取消</el-button>
				<el-button type="primary" size="small" @click="onSubmit" :loading="loading">提交</el-button>
			</div>
		</el-form>
		<!--选择商品-->
		<Product :isproduct="is_product" :excludeIds="exclude_ids" :islist="true" @closeDialog="closeProductFunc">
		</Product>
		<Category :is_category="is_category" :category_list='category_list' @close="closeCategoryFunc"></Category>
	</div>
</template>

<script>
	import CouponApi from '@/api/coupon.js';
	import {
		formatModel
	} from '@/utils/base.js'
	import Product from '@/components/product/Product.vue';
	import Category from '@/components/category/category.vue';
	export default {
		components: {
			Product,
			Category
		},
		data() {
			return {
				activeName: '1',
				/*form表单数据*/
				form: {
					/*优惠券ID*/
					coupon_id: '',
					/*优惠券名称*/
					name: '',
					/*优惠券颜色*/
					color: '',
					/*优惠券类型*/
					coupon_type: '',
					/*减免金额*/
					reduce_price: '',
					/*折扣率*/
					discount: '',
					/*最低消费金额*/
					min_price: '',
					/*到期类型*/
					expire_type: '',
					/*有效天数*/
					expire_day: '',
					/*有效期*/
					active_time: '',
					/*发放量*/
					total_num: '',
					show_center: 1,
					/*优惠限制0不显示1不可与促销同时2不可与等级优惠同时3不可于促销和等级同*/
					free_limit: 0,
					/*排序*/
					sort: 1,
					apply_range: 10,
					max_price: ''
				},
				list: {},
				/*是否正在加载*/
				loading: true,
				pickerOptions0: {
					disabledDate(time) {
						return time.getTime() < Date.now() - 8.64e7; //如果没有后面的-8.64e7就是不可以选择今天的
					}
				},
				is_category: false,
				is_product: false,
				exclude_ids: [],
				product_list: [],
				category_list: {
					second: [],
					first: []
				},
				category_ids: []
			};
		},
		created() {
			let coupon_id = this.$route.query.coupon_id;
			this.getData(coupon_id);
		},

		methods: {
			hasImages(e) {
				if (e) {
					return e;
				} else {
					return '';
				}
			},
			getData(coupon_id) {
				let self = this;
				CouponApi.getEditCoupon({
							coupon_id: coupon_id
						},
						true
					)
					.then(data => {
						let obj = {};
						obj = data.data.detail;
						//选中
						obj.color = data.data.detail.color.value;
						obj.coupon_type = data.data.detail.coupon_type.value;
						self.form = formatModel(self.form, obj);
						if (self.form.apply_range == 20) {
							self.exclude_ids = data.data.detail.product_ids;
							for (let i = 0; i < self.exclude_ids.length; i++) {
								self.exclude_ids[i] = parseInt(self.exclude_ids[i]);
							}
							self.product_list = data.data.detail.product_list;
						}
						if (self.form.apply_range == 30) {
							self.category_list = data.data.detail.category_list;
							console.log(self.category_list);
						}
						self.loading = false;
					})
					.catch(error => {
						console.log(error);
						self.loading = false;
					});
			},

			/*修改*/
			onSubmit() {
				let self = this;
				let form = self.form;
				form.product_ids = self.exclude_ids;
				form.category_list = self.category_list;
				self.$refs.form.validate(valid => {
					if (valid) {
						self.loading = true;
						CouponApi.editCoupon(form, true)
							.then(data => {
								self.loading = false;
								ElMessage({
									message: '恭喜你，修改成功',
									type: 'success'
								});
								self.$router.push('/plus/coupon/index');
							})
							.catch(error => {
								self.loading = false;
							});
					} else {
						self.loading = false;
					}
				});
			},
			closeCategoryFunc(e) {
				let self = this;
				self.is_category = false;
				if (e) {
					self.category_list = e;
				}
			},
			/*关闭商品*/
			closeProductFunc(e) {
				let self = this;
				self.is_product = e.openDialog;
				if (e.type == 'success') {
					e.params.forEach((item, index) => {
						let params = {
							product_id: item.product_id,
							product_name: item.product_name,
							product_image: item.product_image,
						}
						self.exclude_ids.push(params.product_id)
						self.product_list.push(params);
					})
				}
			},
			/*取消*/
			cancelFunc() {
				this.$router.push({
					path: '/plus/coupon/index',
				});
			},
			deleteClick(e) {
				this.exclude_ids.splice(e, 1);
				this.product_list.splice(e, 1);
			},
		}
	};
</script>

<style lang="scss" scoped>
	.mb10 {
		margin-bottom: 10px;
	}

	.product-add {
		padding-bottom: 50px;
	}

	.tips {
		color: #ccc;
	}
</style>